<!-- Sidenav extra -->
<div class="sidenav-extra">
  <!-- File menu -->
  <div id="file-sidenav" class="sidenav-hidden">
    <h3>File</h3>
    <div class="sidenav-extra-close">
      <i class="fa fa-times extra-sidenav-toggle" aria-hidden="true" data-eid="file-sidenav"></i>
    </div>
    <ul>
      <li id="open-file-button" class="available-li">
        <div>Open File...</div>
        <div>Open files from the local drive.</div>
      </li>
      <li id="open-github-file-button" class="available-li">
        <div>Open File from GitHub...</div>
        <div>Open file from a GitHub repository.</div>
      </li>
      <div id="hidden-open-github-file">
        <ul>
          <li>Please enter GitHub repository name </li>
          <li>e.g.: Samsung/iotjs</li>
        </ul>
        <input type="text" id="open-github-repo-name" class="form-control" autofocus />
        <div id="hidden-open-github-file-buttons" class="sidenav-cancel-ok-buttons">
          <div class="btn btn-danger btn-xs" id="cancel-github-file-name"><i class="fa fa-ban" aria-hidden="true"></i> Cancel</div>
          <div class="btn btn-success btn-xs disabled" id="ok-github-file-name"><i class="fa fa-check" aria-hidden="true"></i> OK</div>
        </div>
      </div>
      <li id="new-file-button" class="available-li">
        <div>New File</div>
        <div>Create a new file in the editor.</div>
      </li>
      <div id="hidden-new-file">
        <input class="hidden" id="hidden-file-input" type="file" multiple />
        <ul>
          <li>Allowed characters: a-z, A-Z, 0-9, _, -</li>
          <li>The file name must be unique.</li>
          <li>The file name must be at lest 1 (one) character long.</li>
        </ul>
        <input type="text" id="new-file-name" class="form-control" autofocus />
        <div id="hidden-new-file-info"></div>
        <div id="hidden-new-file-buttons" class="sidenav-cancel-ok-buttons">
          <div class="btn btn-danger btn-xs" id="cancel-file-name"><i class="fa fa-ban" aria-hidden="true"></i> Cancel</div>
          <div class="btn btn-success btn-xs disabled" id="ok-file-name"><i class="fa fa-check" aria-hidden="true"></i> OK</div>
        </div>
      </div>
      <li id="save-file-button" class="available-li">
        <div>Save</div>
        <div>Save the currently opened file.</div>
      </li>
    </ul>
  </div>
  <!-- /File menu -->

  <!-- Settings menu -->
  <div id="settings-sidenav" class="sidenav-hidden">
    <h3>Settings</h3>
    <div class="sidenav-extra-close">
      <i class="fa fa-times extra-sidenav-toggle" aria-hidden="true" data-eid="settings-sidenav"></i>
    </div>

    <div class="control-block">
      <div class="control-item">
        <p>The IoT.js Code stores the settings in your browser storage.</p>
        <div class="btn btn-default btn-xs" id="local-storage-reset-button">Reset default settings</div>
      </div>
    </div>

    <div class="control-block" id="global-control-block">
      <h4>Global</h4>
      <div class="control-item">
        <label for="theme">Theme</label>
        <select id="theme" class="form-control input-sm">
          <option value="vs">Bright</option>
          <option value="vs-dark">Dark</option>
        </select>
      </div>
    </div>

    <div class="control-block" id="editor-control-block">
      <h4>Editor</h4>
      <div class="control-item">
        <label for="fontsize">Font Size</label>
        <select id="fontsize" class="form-control input-sm">
          <option value="10px">10px</option>
          <option value="11px">11px</option>
          <option value="12px">12px</option>
          <option value="13px">13px</option>
          <option value="14px">14px</option>
          <option value="16px">16px</option>
          <option value="18px">18px</option>
          <option value="20px">20px</option>
          <option value="24px">24px</option>
        </select>
      </div>
      <div class="control-item">
        <label for="wrap">Wrap</label>
        <select id="wrap" class="form-control input-sm">
          <option value="off">Off</option>
          <option value="on">On</option>
          <option value="wordWrapColumn">Column</option>
          <option value="bounded">Bounded</option>
        </select>
      </div>
      <div class="control-item">
        <label for="wrapColumn">Wrap column</label>
        <select id="wrapColumn" class="form-control input-sm">
          <option value="80">80</option>
          <option value="100">100</option>
          <option value="120">120</option>
          <option value="200">200</option>
        </select>
      </div>
      <div class="control-item">
        <label for="lineHighlight">Line highlight</label>
        <select id="lineHighlight" class="form-control input-sm">
          <option value="none">None</option>
          <option value="gutter">Gutter</option>
          <option value="line">Line</option>
          <option value="all">All</option>
        </select>
      </div>
      <div class="control-item">
        <label for="whitespace">Whitespace</label>
        <select id="whitespace" class="form-control input-sm">
          <option value="none">None</option>
          <option value="boundary">Boundary</option>
          <option value="all">All</option>
        </select>
      </div>
      <div class="control-item">
        <input type="checkbox" name="minimap" id="minimap">
        <label for="minimap">Minimap</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="folding" id="folding">
        <label for="folding">Code Folding</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="autoClosingBrackets" id="autoClosingBrackets">
        <label for="autoClosingBrackets">Auto closing brackets</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="matchBrackets" id="matchBrackets">
        <label for="matchBrackets">Highlighting match brackets</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="autoIndent" id="autoIndent">
        <label for="autoIndent">Auto indent</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="autoIndent" id="renderIndentGuides">
        <label for="renderIndentGuides">Render indent guides</label>
      </div>
      <div class="control-item">
        <input type="checkbox" name="autoIndent" id="mouseWheelZoom">
        <label for="mouseWheelZoom">Mouse wheel zoom</label>
      </div>
    </div>

    <div class="control-block" id="debugger-control-block">
      <h4>Debugger</h4>
      <div class="control-item">
        <input type="checkbox" id="backtraceRange">
        <label for="backtraceRange">Total backtrace count</label>
        <p>Enable this if you want to use [start, end] interval for backtrace.</p>
      </div>
      <div class="control-item">
        <input type="checkbox" id="transpileToES5">
        <label for="transpileToES5">Transpile source to ES5</label>
        <p>Some new ES6 built-ins, static methods, instance methods and generator functions cannot be used with this environment.</p>
      </div>
    </div>
  </div>
  <!-- /Settings menu -->

  <!-- Download menu -->
  <div id="download-sidenav" class="sidenav-hidden">
    <h3>Download</h3>
    <div class="sidenav-extra-close">
      <i class="fa fa-times extra-sidenav-toggle" aria-hidden="true" data-eid="download-sidenav"></i>
    </div>
    <ul>
      <li id="export-chart-button" class="available-li disabled">
        <div>Memory usage</div>
        <div>Export measured memory usage data to a .csv file.</div>
      </li>
    </ul>
  </div>
  <!-- /Download menu -->
</div>
<!-- /Sidenav extra -->
